<template>
  <div>
    <!-- <div style="margin-bottom:20px;">
      <el-date-picker
        v-model="month"
        type="month"
        placeholder="选择月">
      </el-date-picker>
      <el-button type="primary" @click="isShowTable = true">查询</el-button>
    </div> -->
    <div v-show="true">
      <el-table
        @row-dblclick="isShowTableDetail = true"
        :data="tableData"
        border
        style="width: 100%"
        id="out-table">
        <el-table-column
          width="100"
          prop="a"
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="a2"
          label="会员编号">
        </el-table-column>
        <el-table-column
          prop="a3"
          label="会员姓名">
        </el-table-column>
        <el-table-column
          width="120"
          prop="c"
          label="销售时间">
        </el-table-column>
        <el-table-column
          width="120"
          prop="d"
          label="退货时间">
        </el-table-column>
        <el-table-column
          width="200"
          prop="b"
          label="服务中心编号">
        </el-table-column>
        <el-table-column
          prop="e"
          label="订单金额">
        </el-table-column>
        <el-table-column
          prop="f"
          label="订单PV">
        </el-table-column>
        <el-table-column
          prop="e"
          label="付款金额">
        </el-table-column>
        <el-table-column
          prop="g"
          label="下单方式">
        </el-table-column>
        <el-table-column
        label="现场折扣">
          <el-table-column
          prop="h"
          label="上上月累计分">
          </el-table-column>
          <el-table-column
          prop="i"
          label="上月个人积分">
          </el-table-column>
          <el-table-column
          prop="j"
          label="当月个人消积分">
          </el-table-column>
          <el-table-column
          prop="k"
          label="折扣金额">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="l"
          label="销售月份">
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000">
        </el-pagination>
      </div>
    </div>
    <div v-show="isShowTableDetail" style="margin-top:80px;">
      <img src="../../assets/ddmx.png" alt="">
      <!-- <span class="item2">
        <span class="item2_word">订单编号：</span>
        <span class="item2_input">12345678</span>
      </span>
      <span class="item2">
        <span class="item2_word">订单日期：</span>
        <span class="item2_input">2018-8-1</span>
      </span>
      <span class="item2">
        <span class="item2_word">订单总金额：</span>
        <span class="item2_input">10000</span>
      </span>
      <span class="item2">
        <span class="item2_word">订单PV</span>
        <span class="item2_input">12</span>
      </span>
      <span class="item2">
        <span class="item2_word">付款方式：</span>
        <span class="item2_input">银联10000元</span>
      </span>
      <el-table
        
        :data="table1"
        border
        style="width: 100%;margin-top:20px"
        id="out-table">
        <el-table-column
          prop="a"
          label="产品编号">
        </el-table-column>
        <el-table-column
          prop="b"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="c"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="d"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="e"
          label="PV">
        </el-table-column>
      </el-table> -->
    </div>
    <div class="page_word">OMS-2-1.1</div>
    <!-- <el-button type="primary" @click="exportExcel" class="excelBtn">导出excel</el-button> -->
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    data() {
      return {
        month:"",
        isShowTable:false,
        isShowTableDetail:false,
        // 弹窗
        dialogTableVisible:false,
        currentPage:1,
        tableData: [{
          a:"12345678",
          a2:"123456",
          a3:"陈大文",
          b:"911274201806000051",
          c:"2018-07-01 13:15:10",
          d:"2018-07-01 13:15:10",
          e:"200",
          f:"20",
          g:"商城自购",
          h:"100",
          i:"50",
          j:"20",
          k:"500",
          l:"201807"
        },{
          a:"12345678",
          a2:"123456",
          a3:"陈大文",
          b:"911274201806000051",
          c:"2018-07-01 13:15:10",
          d:"2018-07-01 13:15:10",
          e:"200",
          f:"20",
          g:"云商代购",
          h:"100",
          i:"50",
          j:"20",
          k:"500",
          l:"201807"
        },{
          a:"12345678",
          a2:"123456",
          a3:"陈大文",
          b:"911274201806000051",
          c:"2018-07-01 13:15:10",
          d:"2018-07-01 13:15:10",
          e:"200",
          f:"20",
          g:"商城自购",
          h:"100",
          i:"50",
          j:"20",
          k:"500",
          l:"201807"
        },],
        table1:[
          {
            a:"MA5011",
            b:"柔和洁肤乳",
            c:"1",
            d:"168.00",
            e:"144",
            f:"168.00"
          }, {
            a:"MA5012",
            b:"滋润爽肤水",
            c:"2",
            d:"10.00",
            e:"35",
            f:"20.00"
          }, {
            a:"MA5013",
            b:"脱角质霜",
            c:"3",
            d:"15.00",
            e:"44",
            f:"45.00"
          },
        ]
      }
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
         return wbout
     },
     rowClick(){
       alert(1)
     }
    }
  }
</script>
<style scoped>
.title1{
  text-align: center;
}
.detail_box{
  margin-top: 80px;
}
.page{
  float:right;
  margin-top:20px;
}
</style>
